<template>
    <view style="height: 100%;">
        <scroll-view style="height: 100%;" :scroll-into-view="intoIndex" scroll-y="true" scroll-with-animation
            @scroll="scroll">
            <view class="network">
                <view :id="'slot' + index" class="network-item" v-for="(item, index) in addForm" :key="index">
                    <view class="item-title">
                        <view class="title">
                            <view class="txt">
                                {{ item.title }}
                            </view>
                            <view class="bg"></view>
                        </view>
                        <ImgUpload v-if="item.fileList" :uploadParams="{ ...uploadParams, type_name: item.title }"
                            :title="item.title" :fileList="form[item.key].fileList"
                            @change="(val) => fileChange(val, item.key)">
                        </ImgUpload>
                    </view>
                    <view class="defaultModel">
                        <view class="d_model" v-for="(citem, cindex) in form[item.key].data" :key="cindex">
                            <view class="child">
                                <view class="child-title">
                                    <view class="title">
                                        型号
                                    </view>
                                    <image class="del" @tap="delItem(item.key, cindex)" v-if="cindex != 0"
                                        src="/static/del1.png"></image>
                                </view>

                                <view class="fileds size">
                                    <input v-model="form[item.key].data[cindex]['型号']" class="cinput size-input" type="text"
                                        placeholder="请输入型号">
                                    <view class="xxx">
                                        X
                                    </view>
                                    <input v-model="form[item.key].data[cindex]['数量']" class="cinput num" placeholder="数量"
                                        type="number">
                                </view>

                                <view class="child-title">
                                    <view class="title">
                                        设备是否完好
                                    </view>
                                </view>

                                <view class="fileds">
                                    <u-radio-group v-model="form[item.key].data[cindex]['设备是否完好']" placement="row">
                                        <u-radio style="margin-left: 20rpx;" label="是" name="是"></u-radio>
                                        <u-radio style="margin-left: 20rpx;" label="否" name="否"></u-radio>
                                    </u-radio-group>
                                </view>
                            </view>

                        </view>
                        <view class="add-box">
                            <image class="add" @tap="addItem(item.key)" src="/static/add_incident.png"></image>
                        </view>
                    </view>
                </view>

                <view :id="'slot' + 2" class="network-item">
                    <view class="item-title">
                        <view class="title">
                            <view class="txt">
                                拆迁费用
                            </view>
                            <view class="bg"></view>
                        </view>
                    </view>
                    <view class="defaultModel">
                        <view class="d_model">
                            <view class="child">
                                <view class="child-title">
                                    <view class="title">
                                        {{ '施工费' }}
                                    </view>
                                </view>
                                <view class="fileds">
                                    <input class="cinput" type="text" v-model="form['拆迁费用']['施工费']" placeholder="请输入">
                                </view>

                                <view class="child-title">
                                    <view class="title">
                                        {{ '主材费' }}
                                    </view>
                                </view>
                                <view class="fileds">
                                    <input class="cinput" type="text" v-model="form['拆迁费用']['主材费']" placeholder="请输入">
                                </view>

                                <view class="child-title">
                                    <view class="title">
                                        {{ '辅助费' }}
                                    </view>
                                </view>
                                <view class="fileds">
                                    <input class="cinput" type="text" v-model="form['拆迁费用']['辅助费']" placeholder="请输入">
                                </view>

                                <view class="child-title">
                                    <view class="title">
                                        {{ '差旅费' }}
                                    </view>
                                </view>
                                <view class="fileds">
                                    <input class="cinput" type="text" v-model="form['拆迁费用']['差旅费']" placeholder="请输入">
                                </view>

                                <view class="child-title">
                                    <view class="title">
                                        {{ '拆卸搬运费' }}
                                    </view>
                                </view>
                                <view class="fileds">
                                    <input class="cinput" type="text" v-model="form['拆迁费用']['拆卸搬运费']" placeholder="请输入">
                                </view>


                                <view class="child-title">
                                    <view class="title">
                                        {{ '其他' }}
                                    </view>
                                </view>
                                <view class="fileds">
                                    <input class="cinput" type="text" v-model="form['拆迁费用']['其他']" placeholder="请输入">
                                </view>
                            </view>

                        </view>
                    </view>
                </view>


                <view :id="'slot' + 3" class="network-item">
                    <view class="item-title">
                        <view class="title">
                            <view class="txt">
                                拟施工时间
                            </view>
                            <view class="bg"></view>
                        </view>
                    </view>
                    <view class="defaultModel">
                        <view class="d_model">
                            <view class="child">
                                <picker mode="date" :value="form['拟施工时间']['时间']" 
                                    @change="e=>form['拟施工时间']['时间']=e.detail.value">
                                    <view class="fileds cdata-box">
                                    <view  class="cinput"
                                        :style="{ color: form['拟施工时间']['时间'] ? '#282828' : '#B8B8B8' }">
                                        {{ form['拟施工时间']['时间'] ||
                                            '请选择日期'
                                        }}
                                    </view>
                                    <image class="cicon" src="/static/right.png"></image>
                               
                                </view>
                                </picker>
                             
                            </view>

                        </view>
                    </view>
                </view>

                <view :id="'slot' + 4" class="network-item">
                    <view class="item-title">
                        <view class="title">
                            <view class="txt">
                                施工联系人及电话
                            </view>
                            <view class="bg"></view>
                        </view>
                    </view>
                    <view class="defaultModel">
                        <view class="d_model">
                            <view class="child">
                                <view class="child-title">
                                    <view class="title">
                                        {{ '建设方' }}
                                    </view>
                                </view>
                                <view class="fileds contact">
                                    <input class="cinput name" style="width:150rpx" type="text"
                                        v-model="form['施工联系人及电话']['建设方']['姓名']" :placeholder="'姓名'">
                                    <input class="cinput phone" style="margin-left: 60rpx;flex:1"
                                        v-model="form['施工联系人及电话']['建设方']['电话']" type="number" :placeholder="'电话'">
                                </view>

                                <view class="child-title">
                                    <view class="title">
                                        {{ '施工方' }}
                                    </view>
                                </view>
                                <view class="fileds contact">
                                    <input class="cinput name" style="width:150rpx" type="text"
                                        v-model="form['施工联系人及电话']['施工方']['姓名']" :placeholder="'姓名'">
                                    <input class="cinput phone" style="margin-left: 60rpx;flex:1"
                                        v-model="form['施工联系人及电话']['施工方']['电话']" type="number" :placeholder="'电话'">
                                </view>
                            </view>

                        </view>
                    </view>
                </view>



                <view :id="'slot' + 5" class="network-item">
                    <view class="item-title">
                        <view class="title">
                            <view class="txt">
                                费用结算时间与方式
                            </view>
                            <view class="bg"></view>
                        </view>
                    </view>
                    <view class="defaultModel">
                        <view class="d_model">
                            <view class="child">
                                <view class="child-title">
                                    <view class="title">
                                        {{ '时间' }}
                                    </view>
                                </view>
                                <picker mode="date" :value="form['费用结算时间与方式']['时间']"
                                    @change="e => form['费用结算时间与方式']['时间'] = e.detail.value">
                                    <view class="fileds cdata-box">
                                        <view class="cinput"
                                            :style="{ color: form['费用结算时间与方式']['时间'] ? '#282828' : '#B8B8B8' }">
                                            {{ form['费用结算时间与方式']['时间'] ||
                                                '请选择日期'
                                            }}
                                        </view>
                                        <image class="cicon" src="/static/right.png"></image>
                                    </view>
                                </picker>

                                <view class="child-title">
                                    <view class="title">
                                        {{ '方式' }}
                                    </view>
                                </view>
                                <view class="fileds">
                                    <input class="cinput" type="text" v-model="form['费用结算时间与方式']['方式']" placeholder="请输入">
                                </view>
                            </view>

                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { formatDate } from "@/utils/utils"
export default {
    props: {
        intoIndex: {
            type: String,
            default: ''
        },
        list: {
            type: Array,
            default: []
        },
        uploadParams: {
            type: Object,
            default: {}
        },
        defaultValue: {
            type: Object,
            default: null
        }
    },
    // 局部注册的组件
    components: {},

    created() {
        uni.$u.deepClone(this.selected)
    },

    watch: {

    },

    data() {
        return {
            addForm: [
                {
                    title: '原基站情况',
                    key: '原基站情况',
                    needFile: true,
                    fileList: [],
                },

                {
                    title: '待装基站情况',
                    key: '待装基站情况',
                    needFile: true,
                    fileList: [],
                },
            ],
            fileList: [],
            model: {

            },
            form: {
                '原基站情况': {
                    title: '原基站情况',
                    needFile: true,
                    fileList: [],
                    data: [
                        {
                            '型号': '',
                            '数量': '',
                            '设备是否完好': '是',
                        }
                    ]
                },
                '待装基站情况': {
                    title: '待装基站情况',
                    needFile: true,
                    fileList: [],
                    data: [
                        {
                            '型号': '',
                            '数量': '',
                            '设备是否完好': '是',
                        }
                    ]
                },

                '拆迁费用': {
                    '施工费': '',
                    '主材费': '',
                    '辅助费': '',
                    '差旅费': '',
                    '拆卸搬运费': '',
                    '其他': '',
                },
                '拟施工时间': {
                    '时间': '',
                    show1: false
                },
                '施工联系人及电话': {
                    '建设方': {
                        '姓名': '',
                        '手机号': ''
                    },
                    '施工方': {
                        '姓名': '',
                        '手机号': ''
                    }
                },
                '费用结算时间与方式': {
                    '时间': '',
                    show1: false,
                    '方式': ''
                }

            }

        }
    },
    // 计算属性
    computed: {},
    // 组件方法
    methods: {
        scroll(e) {

        },
        fileChange(val, key) {
            this.form[key].fileList = val
        },
        formatDate(time) {
            if (!time) return ''
            return formatDate(new Date(time))
        },
        dataOpen(formKey, key) {
            this.form[formKey][key] = true
        },
        closeDate(formKey, key) {
            this.form[formKey][key] = false
        },
        addItem(formKey) {
            this.form[formKey].data.push({
                '型号': '',
                '数量': '',
                '设备是否完好': '是',
            })
        },
        delItem(key, index) {
            this.form[key].data.splice(index, 1)
        },


    },
    watch: {
        form: {
            handler(val) {
                this.$emit('getForm', val)
            },
            deep: true,
            immediate: true
        },
        defaultValue: {
            handler(val) {
                this.form = val
            },
        }
    }
}
</script> 

<style scoped lang="scss" src="./assets/index.scss"></style>